import { Meta } from '@storybook/addon-docs';

import image01 from './assets/notificaciones/1.png';
import image02 from './assets/notificaciones/2.png';
import image03 from './assets/notificaciones/3.png';
import image04 from './assets/notificaciones/4.png';
import image05 from './assets/notificaciones/5.png';
import image06 from './assets/notificaciones/6.png';
import image07 from './assets/notificaciones/7.png';
import image08 from './assets/notificaciones/8.png';
import image09 from './assets/notificaciones/9.png';
import image10 from './assets/notificaciones/10.png';
import image11 from './assets/notificaciones/11.png';
import image12 from './assets/notificaciones/12.png';
import image13 from './assets/notificaciones/13.png';
import image14 from './assets/notificaciones/14.png';
import image15 from './assets/notificaciones/15.png';
import image16 from './assets/notificaciones/16.png';
import image17 from './assets/notificaciones/17.png';
import image18 from './assets/notificaciones/18.png';
import image19 from './assets/notificaciones/19.png';
import image20 from './assets/notificaciones/20.png';
import image21 from './assets/notificaciones/21.png';
import image22 from './assets/notificaciones/22.png';
import image23 from './assets/notificaciones/23.png';


<Meta title="Objetos de diseño/Patrones/Notificación" />

<style>{`

  table {
      margin: 0 auto !important;
  }
  tr {
    background-color: white !important;
  }

  th, td {
    vertical-align: top;
    padding-top: 1rem !important;
  }

`}</style>

# Notificación / Notification

Las notificaciones son un método importante para ofrecer información a los usuarios, ofreciendo en un espacio limitado, una serie de mensajes breves y concisos, utilizados para proporcionar recordatorios e información puntual que sirvan para que el usuario comprenda de manera rápida la información que le brinda la notificación y sepan qué hacer a continuación.

Aunque las notificaciones deben ser lo más reducidas posible, tienen un formato variable que se adaptará en cada caso a las necesidades de comunicación de la solución, pudiendo incluir varios párrafos de texto, elementos como etiquetas, fechas, horas, etc.

Se trata de un componente muy eficaz para ofrecer información al usuario y comunicarse con él, su uso debe de hacerse con moderación y ofrecer mensajes apropiados y oportunos, ya que demasiadas notificaciones podrían crear experiencias negativas para el usuario.

### Componente notificación

El componente notificación es un componente avanzado que combina otros componentes vistos anteriormente y que están formados por el siguiente contenido:

**Icono**: informa a los usuarios del tipo de notificación de un vistazo.

**Título**: ofrece a los usuarios una descripción general rápida de la notificación.

**Mensaje**: proporciona detalles adicionales y pasos procesables para que los lleve a cabo el usuario.

**Acción de notificación en línea (opcional)**: botón fantasma que permite a los usuarios abordar la notificación o los lleva a una página con más detalles.

**Cerrar (opcional)**: cierra la notificación.

Otros campos de información opcionales como fecha y hora, enlaces…

<center><img src={image01} width="500"/></center>

Existen variaciones de notificaciones según el estátus de esta, esto es su propósito, pudiendo ser clasificadas de la siguiente manera:

**Información**: Proporcionan información adicional a los usuarios que puede no estar vinculada a su acción o tarea actual. No requieren una acción inmediata y pueden descartarse con un temporizador o persistir, según el contenido.

**Confirmación**: Confirman que una tarea se completó como se esperaba. Por lo general, no requieren más acciones y pueden descartarse automáticamente o persistir de manera no intrusiva.

**Atención**: Informan a los usuarios que están tomando acciones que no son deseables o que pueden tener resultados inesperados. A menudo persisten hasta que el usuario descarta la notificación o continúa con su tarea.

**Error**: Informan a los usuarios de un error o falla crítica y, opcionalmente, bloquean al usuario para que no continúe hasta que se haya resuelto el problema. Persisten siempre hasta que el usuario los descarte o resuelva el error.

Cada una de estas tiene asociado un color propio y un icono identificativo, azul para información, verde para confirmación, amarillo para atención y rojo para error.

| **Información**  |
| ------------------------------------------------------------ |
|  <img src={image02} width="500"/> |

| **Confirmación**  |
| ------------------------------------------------------------ |
|  <img src={image03} width="500"/> |

| **Atención**  |
| ------------------------------------------------------------ |
|  <img src={image04} width="500"/> |

| **Error**  |
| ------------------------------------------------------------ |
|  <img src={image05} width="500"/> |


Además, respecto a su forma y disposición existe una variación de formato que es la **notificación flotante**.

| **Notificación flotante de información**                     | **Notificación flotante de confirmación**              |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| <img src={image06} width="auto"/> | <img src={image07} width="auto"/> |

| ***Notificación flotantede atención**                  | **Notificación flotante de error**                     |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| <img src={image08} width="auto"/> | <img src={image09} width="auto"/> |

Además existen variación de color de las notificaciones, teniendo notificaciones con fondo de color y notificaciones de alto contraste.

| **Notificación con fondo de información**  |
| :------------------------------------------------------------: |
| <img src={image10} width="500"/> |

| ***Notificación con fondo de confirmación** |
| ------------------------------------------------------------ |
| <img src={image11} width="500"/> |

| ***\*Notificación con fondo\** de atención** |
| ------------------------------------------------------------ |
| <img src={image12} width="500"/> |

| ***\*Notificación con fondo\** de error**  |
| ------------------------------------------------------------ |
| <img src={image13} width="500"/> |

| **Alto contraste de información** |
| ------------------------------------------------------------ |
| <img src={image14} width="500"/> |

| **Alto contraste de confirmación**   |
| ------------------------------------------------------------ |
| <img src={image15} width="500"/> |

| **Alto contraste de atención**  |
| ------------------------------------------------------------ |
| <img src={image16} width="500"/> |

| **Alto contraste de error**  |
| ------------------------------------------------------------ |
| <img src={image17} width="500"/> |

En cuanto a la anatomía de este componente, se ajustará a los estándares de construcción definidos anteriormente.

<center><img src={image18} width="500"/></center>


### Avisos mediante notificaciones

Las notificaciones se utilizan para crear avisos para el usuario a través de mensajes breves y concisos para que puedan ser comprendidos de manera rápida y que el usuario sepa qué hacer a continuación.

Como hemos comentado, las notificaciones son un componente muy eficaz para comunicarse con los usuarios, pero su uso debe de hacerse con moderación, ya que su uso inapropiado y repetitivo pueden crear experiencias negativas para el usuario.

Las notificaciones deben de ser relevantes, oportunas e informativas. Algunos de los usos adecuados en los que podrían utilizarse serían por ejemplo para comunicar al usuario de una actualización, cambios de estado o actualizaciones importantes que deban conocer.

También pueden enviarse notificaciones generadas por una tarea como por ejemplo se haya realizado correctamente el envío de un formulario, haya habido un problema al cargar un archivo o no se pueda acceder a un contenido por el fallo en las credenciales.

Otro tipo de notificaciones serían las generadas por el sistema. En este caso son iniciadas por una aplicación o sistema, independientemente de la acción del usuario y algunos ejemplos de ellas serían para comunicar que el usuario pierde la conexión a la red, información de un próximo mantenimiento del sistema o que la sesión de un usuario ha caducado

Existen 5 tipos de notificación: Notificación tipo banner, notificación en línea, notificación flotante, notificación en panel y notificación modal.

#### Notificación tipo Banner

Las notificaciones tipo banner se muestran en la parte superior de la interfaz y se usan para mostrar notificaciones generales del producto o sistema.

<center><img src={image19} width="500"/></center>

Estas notificaciones pueden incluir un botón fantasma o un enlace y persisten hasta que el usuario las descarta, o cuando el usuario resuelve el problema sobre el que la notificación está informado.

<center><img src={image20} width="500"/></center>

#### Notificación en línea

Las **notificaciones en línea** se utilizan en los flujos de tareas, para notificar a los usuarios el estado de una acción. Suelen incorporarse en la parte superior del área de contenido principal.  Persisten hasta que el usuario resuelva o descarte el mensaje y puede incluir una acción de botón fantasma.

Todas las notificaciones en línea utilizan un color que se corresponde con la intención del mensaje y también pueden ir acompañadas de un icono para reforzar la intención del mensaje.

<center><img src={image21} width="500"/></center>

El ancho de las notificaciones en línea varían según el diseño y contenido de las mismas. Pueden expandirse hasta llegar al contenedor y su altura se basa en la longitud del contenido, sin sobrepasar las dos líneas de texto.

Las notificaciones en línea deben de alinearse con las columnas de la cuadrícula y estar situadas cerca de los elementos relacionados.

En los formularios, por ejemplo, para la respuesta a las acciones de usuario, recomienda colocar las notificaciones en línea en la parte inferior de los mismos, justo encima de los botones de envío o cancelación.

### Notificación flotante

Las **notificaciones flotantes** son notificaciones que se deslizan hacia adentro y hacia afuera, generalmente en la parte superior derecha de la página. Son más disruptivas que las notificaciones en línea y se utilizan mejor con mensajes generados por el sistema que no corresponden a una sección específica de la interfaz de usuario.

Las notificaciones flotantes desaparecen automáticamente después de un período de tiempo determinado, pero el usuario también puede descartarlas.

Estas notificaciones no deberán excederse de tres líneas, por lo que en el caso de que las sobrepase deberán de incluir un enlace con el texto “ver más”, llevando al usuario a otra página completa con más detalle o a través de un modal.

<center><img src={image22} width="500"/></center>

### Notificación en panel

Las **notificaciones de panel** son utilizadas para mostrar mensajes cortos que aparecen en la parte superior de la pantalla, en el panel derecho y brindan información no disruptiva.

<center><img src={image23} width="500"/></center>



Estas notificaciones muestran la información de la hora a la que se envió la notificación y utilizan siempre un ancho fijo y la altura dependerá de la longitud del mensaje que contenga la notificación, fijándose el límite en dos líneas de texto.

Las notificaciones pueden incluir un botón fantasma que permite a los usuarios interactuar con ellas. Tomar medidas sobre estas notificaciones debe ser opcional y no debe impedir que el usuario continúe con su tarea actual. Con frecuencia, esta acción lleva a los usuarios a un flujo o página relacionada con el mensaje, donde pueden resolver la notificación. Todas las notificaciones deben descartarse cuando los usuarios interactúan con ellas.

Debido a que las notificaciones de panel se descartan de manera automática, los usuarios deben de poder acceder a ellas en otro lugar para que puedan volver a consultarlas

### Notificación modal


Por último, las notificaciones modales se tratan de notificaciones que  interrumpen al usuario y pausan su tarea actual. Son muy perjudiciales para los usuarios y deben usarse con moderación. Solo se deben de usar este tipo de notificación cuando el mensaje sea crítico y necesite la atención o acción inmediata del usuario.

Los modales persisten hasta que los usuarios interactúan con ellos y solo desaparecen cuando el usuario los descarta.

Para más información se recomienda consultar el apartado de diálogos modales en el patrón de diálogos.